<template>
	<view class="steps_list">
		<uni-card margin="10rpx" padding="4rpx">
			<view class="steps" v-for="(item, index) in stepsList" :key="index">
				<!--左侧索引、中间title、右侧图标 -->
				<view :class="item.currentLineSqe >= item.segmentSqe ? 'steps_top_complete' : 'steps_top'">
					<view :class="item.currentLineSqe >= item.segmentSqe ? 'steps_index_complete' : 'steps_index'">
						{{ index + 1 }}
					</view>
					<view class="steps_title">
						<view class="text">
							<text class="title">{{ item.type }}</text>
						</view>
						<view class="text">
							<text class="label">{{ item.pointNames }}</text>
						</view>
						<view class="steps_icon" @click="clickRightIcon(index)" v-if="showRightIcon">
							<image :src="iconUrl"></image>
						</view>
					</view>
				</view>
				<view :class="item.currentLineSqe >= item.segmentSqe ? 'steps_bottom_border_complete' : 'steps_bottom_border'" v-if="stepsList.length !== index + 1">
					<view class="steps_bottom_results" v-if="item.currentLineSqe >= item.segmentSqe">
						<view class="steps_bottom_results_spot">
							<view class="desp_one" v-if="item.resultTime">
								<text>{{ item.resultTime }}</text>
							</view>
							<view class="desp_two" v-if="item.resultPoint">
								<text>{{ item.resultPoint }}</text>
							</view>
							<view class="desp_three" v-if="item.despThree">
								<text>{{ item.despThree }}</text>
							</view>
							<view class="desp_four" v-if="item.despFour">
								<text>{{ item.despFour }}</text>
							</view>
						</view>
					</view>
					<view class="steps_bottom_results" v-else>
						<view class="steps_bottom_results_spot">请等待....</view>
					</view>
				</view>
				<view :class="item.currentLineSqe >= item.segmentSqe ? 'steps_bottom_complete' : 'steps_bottom'" v-else>
					<view class="steps_bottom_results" v-if="item.currentLineSqe >= item.segmentSqe">
						<view class="steps_bottom_results_spot">
							<view class="desp_one" v-if="item.resultTime">
								<text>{{ item.resultTime }}</text>
							</view>
							<view class="desp_two" v-if="item.resultPoint">
								<text>{{ item.resultPoint }}</text>
							</view>
							<view class="desp_three" v-if="item.despThree">
								<text>{{ item.despThree }}</text>
							</view>
							<view class="desp_four" v-if="item.despFour">
								<text>{{ item.despFour }}</text>
							</view>
						</view>
					</view>
					<view class="steps_bottom_results" v-else>
						<view class="steps_bottom_results_spot">请等待....</view>
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
export default {
	name: 'dil-step',
	props: {
		stepsList: {
			type: Array,
			default: null
		},
		Navigation: {
			type: Boolean,
			default: null
		},
		orderLineSequence: {
			type: Number,
			default: null
		},
		showRightIcon: {
			type: Boolean,
			default: true
		},
		iconUrl: {
			type: String,
			default: '/static/icon/map.png'
		}
	},
	mounted() {
		console.log('this.stepsList: ', this.stepsList);
	},
	methods: {
		clickRightIcon(index) {
			if (index == 0) {
				uni.showToast({
					icon: 'none',
					title: '第一步无需导航'
				});
				return;
			}
			let transOrderId = this.stepsList[index].transOrderId;
			let startPointIds = this.stepsList[index - 1].pointIds;
			let endPointIds = this.stepsList[index].pointIds;
			console.log('startPointIds', startPointIds);
			console.log('endPointIds', endPointIds);
			if (!startPointIds || !endPointIds) {
				uni.showToast({
					icon: 'none',
					title: '步骤缺乏导航点！请检查线路步骤！'
				});
				return;
			} else if (!transOrderId) {
				uni.showToast({
					icon: 'none',
					title: '非法步骤！无运单Id!'
				});
				return;
			}
			//检验结束，跳转到导航界面
			uni.navigateTo({
				url: '/pages/navigation/navigation?' + 'transOrderId=' + transOrderId + '&startPointIds=' + startPointIds + '&endPointIds=' + endPointIds,
				animationType: 'pop-in',
				animationDuration: 200,
				success: (res) => {},
				fail(res) {
					console.log('fail:', res);
				}
			});
			this.$emit('clickRight', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.steps_list {
	width: 100%;
	/deep/.uni-card {
		border-radius: 40rpx;
	}
	.steps {
		// width: 90%;
		// margin: auto;
		.steps_top {
			display: flex;
			color: #999999;
			.steps_index {
				background-color: #b0adad;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
			}
			.steps_title {
				width: 100%;
				font-size: 18px;
				display: flex;
				align-items: center;
				padding-left: 25rpx;
				.text {
					width: 90%;
					.title {
						font-weight: 700;
						color: #000000;
					}
					.label {
						font-size: 14px;
						font-weight: 500;
						color: #000000;
					}
				}
				.steps_icon {
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
		.steps_top_complete {
			display: flex;
			color: #007aff;
			.steps_index_complete {
				background-color: #007aff;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
			}
			.steps_title {
				width: 100%;
				font-size: 18px;
				display: flex;
				align-items: center;
				padding-left: 25rpx;
				.text {
					width: 90%;
					.title {
						font-weight: 700;
						color: #007aff;
					}
					.label {
						font-size: 14px;
						font-weight: 500;
						color: #007aff;
					}
				}
				.steps_icon {
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}

		.steps_bottom_border_complete {
			color: #007aff;
			border-left: 2px solid #007aff;
			width: 100%;
			height: 100%;
			margin-left: 26rpx;
			margin-top: 10rpx;
			.steps_bottom_results {
				width: 95%;
				height: 100%;
				min-height: 50rpx;
				display: flex;
				padding-top: 20rpx;
				margin-left: 45rpx;
				border-bottom: 2rpx solid #c2c2c2;
				.steps_bottom_results_spot {
				}
			}
		}

		.steps_bottom_border {
			border-left: 2px solid #000000;
			width: 100%;
			height: 100%;
			margin-left: 26rpx;
			margin-top: 10rpx;
			.steps_bottom_results {
				width: 95%;
				min-height: 50rpx;
				display: flex;
				padding-top: 18rpx;
				margin-left: 40rpx;
				border-bottom: 2rpx solid #c2c2c2;
			}
		}

		.steps_bottom_complete {
			color: #007aff;
			width: 100%;
			height: 100%;
			margin-left: 26rpx;
			margin-top: 10rpx;
			.steps_bottom_results {
				width: 95%;
				min-height: 50rpx;
				display: flex;
				padding-top: 18rpx;
				margin-left: 40rpx;
				border-bottom: 2rpx solid #c2c2c2;
				.steps_bottom_results_spot {
					// width: 90%;
				}
			}
		}
		.steps_bottom {
			border-left: 2rpx solid #ffffff;
			width: 100%;
			height: 100rpx;
			margin-left: 18rpx;
			margin-top: 10rpx;
			.steps_bottom_results {
				width: 95%;
				min-height: 50rpx;
				display: flex;
				padding-top: 18rpx;
				padding-left: 10rpx;
				margin-left: 40rpx;
				border-bottom: 2rpx solid #c2c2c2;

				.steps_bottom_results_spot {
					width: 90%;
				}
			}
		}
	}
}
</style>
